<template>
    <div>
        <keep-alive>
            <component :is="mode" :id="id" :training="training" @toggleMode="toggleMode" />
        </keep-alive>
    </div>
</template>
<script>
import ScoreDistribution from '../components/score-distribution'
import TrainingScore from '../components/training-score'

export default {
    components: {
        ScoreDistribution,
        TrainingScore
    },
    props: {
        id: {
            type: String,
            default: ''
        },
        training: {
            type: Object,
            default: () => ({
                classList: []
            })
        }
    },
    data () {
        return {
            mode: 'TrainingScore'
        }
    },
    methods: {
        toggleMode (mode) {
            this.mode = mode
        }
    }
}
</script>
